<template>
  <div class="dict-manager-container">
    <div class="main-content">
      <div class="left-panel">
        <div class="panel-header">
          <h3 class="panel-title">字典类型</h3>
          <ElButton type="primary" size="default" @click="handleAddDictType">
            新增字典类型</ElButton
          >
        </div>
        <div class="panel-body">
          <ElInput
            v-model:modelValue="state.dictTypeQuery"
            placeholder="搜索字典名称"
            clearable=""
            class="search-input"
            @keyup.enter="getDictTypeList"
            @clear="clear_1ejaqnm8ym"></ElInput>
          <ElTable
            ref="dictTypeTable"
            :data="state.dictTypeList"
            row-key="id"
            stripe=""
            :loading="state.dictTypeLoading"
            highlight-current-row=""
            class="content-table"
            :border="true"
            :show-overflow-tooltip="true"
            @row-click="handleDictTypeSelect">
            <ElTableColumn
              prop="name"
              label="字典名称"
              align="center"
              min-width="150"></ElTableColumn>
            <ElTableColumn
              prop="type"
              label="字典类型"
              align="center"
              min-width="150">
              <template #default="{ row, column, $index }">
                <ElTag> {{ row.type }}</ElTag>
              </template></ElTableColumn
            >
            <ElTableColumn
              label="操作"
              align="center"
              width="110"
              fixed="right">
              <template #default="scope">
                <ElButton
                  type="primary"
                  link=""
                  @click="
                    (...args: any[]) =>
                      click_3gaqg1ery({ scope_26qaqtt2q3 }, args)
                  ">
                  编辑</ElButton
                >
                <ElButton
                  type="danger"
                  link=""
                  @click="
                    (...args: any[]) =>
                      click_3iaqg1ery({ scope_26qaqtt2q3 }, args)
                  ">
                  删除</ElButton
                >
              </template></ElTableColumn
            ></ElTable
          >
          <div v-if="state.dictTypeTotal > 0" class="pagination">
            <ElPagination
              v-model:current-page="state.dictTypePage"
              v-model:page-size="state.dictTypePageSize"
              :total="state.dictTypeTotal"
              layout="total, sizes, prev, pager, next, jumper"
              :background="true"
              @size-change="handleDictTypeSizeChange"
              @current-change="handleDictTypePageChange"></ElPagination>
          </div>
        </div>
      </div>
      <div class="right-panel">
        <div class="panel-header">
          <h3 class="panel-title">
            <span>
              <span> 字典数据 -（</span>
              <span> {{ state.selectedDictType.name || '未选择' }}</span>
              <span> ）</span></span
            >
          </h3>
          <div class="data-actions">
            <ElButton
              type="primary"
              size="default"
              :disabled="!state.selectedDictType.id"
              @click="handleAddDictData">
              新增字典数据</ElButton
            >
          </div>
        </div>
        <div class="panel-body">
          <ElInput
            v-model:modelValue="state.dictDataQuery"
            placeholder="搜索字典标签"
            clearable=""
            size="default"
            class="data-search"
            @keyup.enter="getDictDataList"
            @clear="clear_1f0aqnm8yn"></ElInput>
          <ElTable
            v-if="state.selectedDictType.id || state.dictDataList.length > 0"
            :data="state.dictDataList"
            row-key="id"
            stripe=""
            :loading="state.dictDataLoading"
            class="content-table"
            :border="true"
            :show-overflow-tooltip="true">
            <ElTableColumn
              prop="label"
              label="字典标签"
              align="center"
              min-width="150"></ElTableColumn>
            <ElTableColumn
              prop="value"
              label="字典键值"
              align="center"
              min-width="150">
              <template #default="{ row, column, $index }">
                <ElTag type="success" :hit="false"> {{ row.value }}</ElTag>
              </template></ElTableColumn
            >
            <ElTableColumn
              prop="sort"
              label="排序"
              align="center"
              width="150"></ElTableColumn>
            <ElTableColumn prop="status" label="状态" align="center" width="80">
              <template #default="scope">
                <ElSwitch
                  v-model="scope.row.status"
                  :activeValue="1"
                  :inactiveValue="0"
                  @change="
                    (...args: any[]) =>
                      change_3zaqg1erz({ scope_279aqtt2q4 }, args)
                  "></ElSwitch> </template
            ></ElTableColumn>
            <ElTableColumn
              label="操作"
              align="center"
              width="110"
              fixed="right">
              <template #default="scope">
                <ElButton
                  type="primary"
                  link=""
                  @click="
                    (...args: any[]) =>
                      click_42aqg1erz({ scope_27aaqtt2q4 }, args)
                  ">
                  编辑</ElButton
                >
                <ElButton
                  type="danger"
                  link=""
                  @click="
                    (...args: any[]) =>
                      click_44aqg1erz({ scope_27aaqtt2q4 }, args)
                  ">
                  删除</ElButton
                >
              </template></ElTableColumn
            ></ElTable
          >
          <div
            v-else-if="state.dictTypeList.length > 0 && !state.dictDataLoading"
            class="no-data">
            <p>请选择左侧字典类型以加载数据</p>
          </div>
          <div
            v-else-if="!state.dictTypeList.length && !state.dictTypeLoading"
            class="no-data">
            <p>请先添加字典类型</p>
          </div>
          <div v-if="state.dictDataTotal > 0" class="pagination">
            <ElPagination
              v-model:current-page="state.dictDataPage"
              v-model:page-size="state.dictDataPageSize"
              :total="state.dictDataTotal"
              layout="total, sizes, prev, pager, next, jumper"
              :background="true"
              @size-change="handleDictDataSizeChange"
              @current-change="handleDictDataPageChange"></ElPagination>
          </div>
        </div>
      </div>
    </div>
    <ElDialog
      v-model:modelValue="state.dictTypeDialogVisible"
      :title="state.dictTypeDialogTitle"
      width="500px"
      destroy-on-close="">
      <ElForm
        ref="dictTypeForm"
        :model="state.dictTypeForm"
        :rules="state.dictTypeRules"
        label-width="100px">
        <ElFormItem label="字典名称" prop="name">
          <ElInput
            v-model:modelValue="state.dictTypeForm.name"
            placeholder="请输入字典名称"></ElInput
        ></ElFormItem>
        <ElFormItem label="字典类型" prop="type">
          <ElInput
            v-model:modelValue="state.dictTypeForm.type"
            placeholder="请输入唯一字典类型"
            :disabled="state.dictTypeDialogType === 'edit'"></ElInput
        ></ElFormItem>
        <ElFormItem label="状态" prop="status">
          <ElRadioGroup v-model:modelValue="state.dictTypeForm.status">
            <ElRadio :label="1"> 正常</ElRadio>
            <ElRadio :label="0"> 停用</ElRadio></ElRadioGroup
          ></ElFormItem
        >
        <ElFormItem label="备注" prop="remark">
          <ElInput
            v-model:modelValue="state.dictTypeForm.remark"
            placeholder="请输入备注"
            type="textarea"
            :rows="3"></ElInput></ElFormItem
      ></ElForm>
      <template #footer="scope_gpaqhs473">
        <ElButton
          @click="
            (...args: any[]) => click_h2aqhs473({ scope_27haqtt2q4 }, args)
          ">
          取消</ElButton
        >
        <ElButton type="primary" @click="submitDictTypeForm"> 确定</ElButton>
      </template></ElDialog
    >
    <ElDialog
      v-model:modelValue="state.dictDataDialogVisible"
      :title="state.dictDataDialogTitle"
      width="500px"
      destroy-on-close="">
      <ElForm
        ref="dictDataForm"
        :model="state.dictDataForm"
        :rules="state.dictDataRules"
        label-width="100px">
        <ElFormItem label="字典标签" prop="label">
          <ElInput
            v-model:modelValue="state.dictDataForm.label"
            placeholder="请输入字典标签"></ElInput
        ></ElFormItem>
        <ElFormItem label="字典键值" prop="value">
          <ElInput
            v-model:modelValue="state.dictDataForm.value"
            placeholder="请输入字典键值"></ElInput
        ></ElFormItem>
        <ElFormItem label="排序" prop="sort">
          <ElInputNumber
            v-model:modelValue="state.dictDataForm.sort"
            :min="0"
            :max="999"
            placeholder="请输入排序"
            controls-position="right"
            :style="{ width: '100%' }"
            class="ElInputNumber_hcaqhs473"></ElInputNumber
        ></ElFormItem>
        <ElFormItem label="状态" prop="status">
          <ElRadioGroup v-model:modelValue="state.dictDataForm.status">
            <ElRadio :label="1"> 正常</ElRadio>
            <ElRadio :label="0"> 停用</ElRadio></ElRadioGroup
          ></ElFormItem
        ></ElForm
      >
      <template #footer="scope_h5aqhs473">
        <ElButton
          @click="
            (...args: any[]) => click_hiaqhs473({ scope_27vaqtt2q4 }, args)
          ">
          取消</ElButton
        >
        <ElButton type="primary" @click="submitDictDataForm"> 确定</ElButton>
      </template></ElDialog
    >
  </div>
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import {
    ElButton,
    ElInput,
    ElTable,
    ElTableColumn,
    ElTag,
    ElPagination,
    ElSwitch,
    ElDialog,
    ElForm,
    ElFormItem,
    ElRadioGroup,
    ElRadio,
    ElInputNumber,
    ElMessage,
    ElMessageBox
  } from 'element-plus';
  import { useProvider } from '@vtj/renderer';
  export default defineComponent({
    name: 'Dict',
    components: {
      ElButton,
      ElInput,
      ElTable,
      ElTableColumn,
      ElTag,
      ElPagination,
      ElSwitch,
      ElDialog,
      ElForm,
      ElFormItem,
      ElRadioGroup,
      ElRadio,
      ElInputNumber
    },
    setup(props) {
      const provider = useProvider({ id: 'raqtkl42', version: '1759119321347' });
      const state = reactive({
        dictTypeList: [],
        dictTypeLoading: false,
        dictTypeQuery: '',
        dictTypePage: 1,
        dictTypePageSize: 10,
        dictTypeTotal: 0,
        selectedDictType: { id: '', name: '', type: '' },
        dictDataList: [],
        dictDataLoading: false,
        dictDataQuery: '',
        dictDataPage: 1,
        dictDataPageSize: 10,
        dictDataTotal: 0,
        dictTypeDialogVisible: false,
        dictTypeDialogTitle: '新增字典类型',
        dictTypeDialogType: 'add',
        dictTypeForm: { id: '', name: '', type: '', status: 1, remark: '' },
        dictTypeRules: {
          name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
          type: [{ required: true, message: '请输入字典类型', trigger: 'blur' }],
          status: [{ required: true, message: '请选择状态', trigger: 'change' }]
        },
        dictDataDialogVisible: false,
        dictDataDialogTitle: '新增字典数据',
        dictDataDialogType: 'add',
        dictDataForm: {
          id: '',
          dictType: '',
          label: '',
          value: '',
          sort: 0,
          status: 1
        },
        dictDataRules: {
          label: [{ required: true, message: '请输入字典标签', trigger: 'blur' }],
          value: [{ required: true, message: '请输入字典键值', trigger: 'blur' }],
          sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
          status: [{ required: true, message: '请选择状态', trigger: 'change' }]
        }
      });
      return { state, props, provider, ElMessage, ElMessageBox };
    },
    methods: {
      async putSystemDict(...args) {
        // DataSource: eyJyZWYiOiIybmFtNDl5cDMiLCJuYW1lIjoicHV0U3lzdGVtRGljdCIsInRlc3QiOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IigpID0+XG4gIHRoaXMucnVuQXBpKHtcbiAgICAvKiDlnKjov5nph4zlj6/ovpPlhaXmjqXlj6Plj4LmlbAgICovXG4gIH0pIn0sInR5cGUiOiJhcGkiLCJsYWJlbCI6IuabtOaWsOWtl+WFuCIsInRyYW5zZm9ybSI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKHJlcykgPT4ge1xuICByZXR1cm4gcmVzO1xufSJ9LCJtb2NrVGVtcGxhdGUiOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXEpID0+IHtcbiAgcmV0dXJuIHtcbiAgICBjb2RlOiAwLFxuICAgIGRhdGE6IG51bGxcbiAgfTtcbn0ifX0=
        return await this.provider.apis['2nam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async postSystemDict(...args) {
        // DataSource: eyJyZWYiOiIyb2FtNDl5cDMiLCJuYW1lIjoicG9zdFN5c3RlbURpY3QiLCJ0ZXN0Ijp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIoKSA9PlxuICB0aGlzLnJ1bkFwaSh7XG4gICAgLyog5Zyo6L+Z6YeM5Y+v6L6T5YWl5o6l5Y+j5Y+C5pWwICAqL1xuICB9KSJ9LCJ0eXBlIjoiYXBpIiwibGFiZWwiOiLmt7vliqDlrZflhbgiLCJ0cmFuc2Zvcm0iOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXMpID0+IHtcbiAgcmV0dXJuIHJlcztcbn0ifSwibW9ja1RlbXBsYXRlIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVxKSA9PiB7XG4gIHJldHVybiB7XG4gICAgY29kZTogMCxcbiAgICBkYXRhOiBudWxsXG4gIH07XG59In19
        return await this.provider.apis['2oam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async putSystemDictData(...args) {
        // DataSource: eyJyZWYiOiIycGFtNDl5cDMiLCJuYW1lIjoicHV0U3lzdGVtRGljdERhdGEiLCJ0ZXN0Ijp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIoKSA9PlxuICB0aGlzLnJ1bkFwaSh7XG4gICAgLyog5Zyo6L+Z6YeM5Y+v6L6T5YWl5o6l5Y+j5Y+C5pWwICAqL1xuICB9KSJ9LCJ0eXBlIjoiYXBpIiwibGFiZWwiOiLmm7TmlrDlrZflhbjmlbDmja4iLCJ0cmFuc2Zvcm0iOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXMpID0+IHtcbiAgcmV0dXJuIHJlcztcbn0ifSwibW9ja1RlbXBsYXRlIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVxKSA9PiB7XG4gIHJldHVybiB7XG4gICAgY29kZTogMCxcbiAgICBkYXRhOiBudWxsXG4gIH07XG59In19
        return await this.provider.apis['2pam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async postSystemDictData(...args) {
        // DataSource: eyJyZWYiOiIycWFtNDl5cDMiLCJuYW1lIjoicG9zdFN5c3RlbURpY3REYXRhIiwidGVzdCI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKCkgPT5cbiAgdGhpcy5ydW5BcGkoe1xuICAgIC8qIOWcqOi/memHjOWPr+i+k+WFpeaOpeWPo+WPguaVsCAgKi9cbiAgfSkifSwidHlwZSI6ImFwaSIsImxhYmVsIjoi5re75Yqg5a2X5YW45pWw5o2uIiwidHJhbnNmb3JtIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVzKSA9PiB7XG4gIHJldHVybiByZXM7XG59In0sIm1vY2tUZW1wbGF0ZSI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKHJlcSkgPT4ge1xuICByZXR1cm4ge1xuICAgIGNvZGU6IDAsXG4gICAgZGF0YTogbnVsbFxuICB9O1xufSJ9fQ==
        return await this.provider.apis['2qam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async getSystemDictList(...args) {
        // DataSource: eyJyZWYiOiIzZ2FtNDl5cDMiLCJuYW1lIjoiZ2V0U3lzdGVtRGljdExpc3QiLCJ0ZXN0Ijp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIoKSA9PlxuICB0aGlzLnJ1bkFwaSh7XG4gICAgLyog5Zyo6L+Z6YeM5Y+v6L6T5YWl5o6l5Y+j5Y+C5pWwICAqL1xuICB9KSJ9LCJ0eXBlIjoiYXBpIiwibGFiZWwiOiLojrflj5blrZflhbjliJfooagiLCJ0cmFuc2Zvcm0iOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXMpID0+IHtcbiAgcmV0dXJuIHJlcztcbn0ifSwibW9ja1RlbXBsYXRlIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVxKSA9PiB7XG4gIHJldHVybiB7XG4gICAgY29kZTogMCxcbiAgICBkYXRhOiBudWxsXG4gIH07XG59In19
        return await this.provider.apis['3gam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async getSystemDictDataTypeDictType(...args) {
        // DataSource: eyJyZWYiOiIzaGFtNDl5cDMiLCJuYW1lIjoiZ2V0U3lzdGVtRGljdERhdGFUeXBlRGljdFR5cGUiLCJ0ZXN0Ijp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIoKSA9PlxuICB0aGlzLnJ1bkFwaSh7XG4gICAgLyog5Zyo6L+Z6YeM5Y+v6L6T5YWl5o6l5Y+j5Y+C5pWwICAqL1xuICB9KSJ9LCJ0eXBlIjoiYXBpIiwibGFiZWwiOiLmoLnmja7lrZflhbjnsbvlnovojrflj5blrZflhbjmlbDmja4iLCJ0cmFuc2Zvcm0iOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXMpID0+IHtcbiAgcmV0dXJuIHJlcztcbn0ifSwibW9ja1RlbXBsYXRlIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVxKSA9PiB7XG4gIHJldHVybiB7XG4gICAgY29kZTogMCxcbiAgICBkYXRhOiBudWxsXG4gIH07XG59In19
        return await this.provider.apis['3ham49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async getSystemDictDataList(...args) {
        // DataSource: eyJyZWYiOiIzaWFtNDl5cDMiLCJuYW1lIjoiZ2V0U3lzdGVtRGljdERhdGFMaXN0IiwidGVzdCI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKCkgPT5cbiAgdGhpcy5ydW5BcGkoe1xuICAgIC8qIOWcqOi/memHjOWPr+i+k+WFpeaOpeWPo+WPguaVsCAgKi9cbiAgfSkifSwidHlwZSI6ImFwaSIsImxhYmVsIjoi6I635Y+W5a2X5YW45pWw5o2u5YiX6KGoIiwidHJhbnNmb3JtIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVzKSA9PiB7XG4gIHJldHVybiByZXM7XG59In0sIm1vY2tUZW1wbGF0ZSI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKHJlcSkgPT4ge1xuICByZXR1cm4ge1xuICAgIGNvZGU6IDAsXG4gICAgZGF0YTogbnVsbFxuICB9O1xufSJ9fQ==
        return await this.provider.apis['3iam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async deleteSystemDictId(...args) {
        // DataSource: eyJyZWYiOiIzcGFtNDl5cDMiLCJuYW1lIjoiZGVsZXRlU3lzdGVtRGljdElkIiwidGVzdCI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKCkgPT5cbiAgdGhpcy5ydW5BcGkoe1xuICAgIC8qIOWcqOi/memHjOWPr+i+k+WFpeaOpeWPo+WPguaVsCAgKi9cbiAgfSkifSwidHlwZSI6ImFwaSIsImxhYmVsIjoi5Yig6Zmk5a2X5YW4IiwidHJhbnNmb3JtIjp7InR5cGUiOiJKU0Z1bmN0aW9uIiwidmFsdWUiOiIocmVzKSA9PiB7XG4gIHJldHVybiByZXM7XG59In0sIm1vY2tUZW1wbGF0ZSI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKHJlcSkgPT4ge1xuICByZXR1cm4ge1xuICAgIGNvZGU6IDAsXG4gICAgZGF0YTogbnVsbFxuICB9O1xufSJ9fQ==
        return await this.provider.apis['3pam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      async deleteSystemDictDataId(...args) {
        // DataSource: eyJyZWYiOiIzcWFtNDl5cDMiLCJuYW1lIjoiZGVsZXRlU3lzdGVtRGljdERhdGFJZCIsInRlc3QiOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IigpID0+XG4gIHRoaXMucnVuQXBpKHtcbiAgICAvKiDlnKjov5nph4zlj6/ovpPlhaXmjqXlj6Plj4LmlbAgICovXG4gIH0pIn0sInR5cGUiOiJhcGkiLCJsYWJlbCI6IuWIoOmZpOWtl+WFuOaVsOaNriIsInRyYW5zZm9ybSI6eyJ0eXBlIjoiSlNGdW5jdGlvbiIsInZhbHVlIjoiKHJlcykgPT4ge1xuICByZXR1cm4gcmVzO1xufSJ9LCJtb2NrVGVtcGxhdGUiOnsidHlwZSI6IkpTRnVuY3Rpb24iLCJ2YWx1ZSI6IihyZXEpID0+IHtcbiAgcmV0dXJuIHtcbiAgICBjb2RlOiAwLFxuICAgIGRhdGE6IG51bGxcbiAgfTtcbn0ifX0=
        return await this.provider.apis['3qam49yp3']
          .apply(this, args)
          .then((res) => {
            return res;
          });
      },
      clear_1ejaqnm8ym() {
        this.getDictTypeList();
      },
      click_3gaqg1ery({ scope_26qaqtt2q3 }, args) {
        return (($event) => {
          this.handleEditDictType(scope.row);
        }).apply(this, args);
      },
      click_3iaqg1ery({ scope_26qaqtt2q3 }, args) {
        return (($event) => {
          this.handleDeleteDictType(scope.row.id);
        }).apply(this, args);
      },
      clear_1f0aqnm8yn() {
        this.getDictDataList();
      },
      change_3zaqg1erz({ scope_279aqtt2q4 }, args) {
        return ((val) => this.handleDictDataStatusChange(scope.row, val)).apply(
          this,
          args
        );
      },
      click_42aqg1erz({ scope_27aaqtt2q4 }, args) {
        return (($event) => {
          this.handleEditDictData(scope.row);
        }).apply(this, args);
      },
      click_44aqg1erz({ scope_27aaqtt2q4 }, args) {
        return (($event) => {
          this.handleDeleteDictData(scope.row.id);
        }).apply(this, args);
      },
      click_h2aqhs473({ scope_27haqtt2q4 }, args) {
        return (() => {
          this.state.dictTypeDialogVisible = false;
        }).apply(this, args);
      },
      click_hiaqhs473({ scope_27vaqtt2q4 }, args) {
        return (() => {
          this.state.dictDataDialogVisible = false;
        }).apply(this, args);
      },
      async getDictTypeList() {
        this.state.dictTypeLoading = true;
        try {
          const { data } = await this.getSystemDictList({
            pageNum: this.state.dictTypePage,
            pageSize: this.state.dictTypePageSize,
            name: this.state.dictTypeQuery
          });
          this.state.dictTypeList = data.list;
          this.state.dictTypeTotal = data.total;
        } catch (err) {
          ElMessage.error('获取字典类型失败，请稍后重试');
        } finally {
          this.state.dictTypeLoading = false;
        }
      },
      async handleAutoSelectFirstDictType() {
        const firstType = this.state.dictTypeList[0];
        if (firstType) {
          this.state.selectedDictType = {
            id: firstType.id,
            name: firstType.name,
            type: firstType.type
          };
          await this.getDictDataList();
          if (this.dictTypeTable) {
            this.dictTypeTable.setCurrentRow(firstType);
          }
        }
      },
      async handleDictTypeSelect(row) {
        this.state.selectedDictType = {
          id: row.id,
          name: row.name,
          type: row.type
        };
        this.state.dictDataPage = 1;
        await this.getDictDataList();
      },
      handleDictTypeSizeChange(size) {
        this.state.dictTypePageSize = size;
        this.state.dictTypePage = 1;
        this.getDictTypeList();
      },
      handleDictTypePageChange(page) {
        this.state.dictTypePage = page;
        this.getDictTypeList();
      },
      async handleDictTypeStatusChange(row, val) {
        try {
          await this.putSystemDict({ id: row.id, status: val });
          ElMessage.success('状态更新成功');
        } catch (err) {
          row.status = row.status === '1' ? '0' : '1';
          ElMessage.error('状态更新失败');
        }
      },
      handleAddDictType() {
        this.state.dictTypeDialogType = 'add';
        this.state.dictTypeDialogTitle = '新增字典类型';
        this.state.dictTypeForm = {
          id: '',
          name: '',
          type: '',
          status: 1,
          remark: ''
        };
        this.state.dictTypeDialogVisible = true;
      },
      handleEditDictType(row) {
        this.state.dictTypeDialogType = 'edit';
        this.state.dictTypeDialogTitle = '编辑字典类型';
        this.state.dictTypeForm = { ...row };
        this.state.dictTypeDialogVisible = true;
      },
      async submitDictTypeForm() {
        if (!this.state.dictTypeForm) return;
        try {
          await this.$refs.dictTypeForm.validate();
          if (this.state.dictTypeDialogType === 'add') {
            await this.postSystemDict(this.state.dictTypeForm);
          } else {
            await this.putSystemDict(this.state.dictTypeForm);
          }
          ElMessage.success(
            `${this.state.dictTypeDialogType === 'add' ? '新增' : '编辑'}字典类型成功`
          );
          this.state.dictTypeDialogVisible = false;
          this.getDictTypeList();
          if (
            this.state.dictTypeDialogType === 'add' &&
            this.state.dictTypeList.length === 0
          ) {
            await this.handleAutoSelectFirstDictType();
          }
        } catch (err) {
          if (err.name !== 'ValidationError') {
            ElMessage.error(
              `${this.state.dictTypeDialogType === 'add' ? '新增' : '编辑'}字典类型失败`
            );
          }
        }
      },
      async handleDeleteDictType(id) {
        try {
          await ElMessageBox.confirm(
            '确定删除该字典类型？删除后关联的字典数据也会被删除',
            '警告',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          );
          await this.deleteSystemDictId(null, { params: { id } });
          ElMessage.success('删除字典类型成功');
          const oldSelectedId = this.state.selectedDictType.id;
          await this.getDictTypeList();
          if (oldSelectedId === id) {
            this.state.selectedDictType = { id: '', name: '', type: '' };
            this.state.dictDataList = [];
            this.state.dictDataTotal = 0;
            if (this.state.dictTypeList.length > 0) {
              await this.handleAutoSelectFirstDictType();
            }
          }
        } catch (err) {
          if (err !== 'cancel') ElMessage.error('删除字典类型失败');
        }
      },
      async getDictDataList() {
        if (!this.state.selectedDictType.type) return;
        this.state.dictDataLoading = true;
        try {
          const { data } = await this.getSystemDictDataList({
            pageNum: this.state.dictDataPage,
            pageSize: this.state.dictDataPageSize,
            dictType: this.state.selectedDictType.type,
            label: this.state.dictDataQuery
          });
          this.state.dictDataList = data.list;
          this.state.dictDataTotal = data.total;
        } catch (err) {
          ElMessage.error('获取字典数据失败，请稍后重试');
        } finally {
          this.state.dictDataLoading = false;
        }
      },
      handleDictDataSizeChange(size) {
        this.state.dictDataPageSize = size;
        this.state.dictDataPage = 1;
        this.getDictDataList();
      },
      handleDictDataPageChange(page) {
        this.state.dictDataPage = page;
        this.getDictDataList();
      },
      async handleDictDataStatusChange(row, val) {
        console.log(row, val);
        try {
          await this.putSystemDictData({ id: row.id, status: val });
          ElMessage.success('状态更新成功');
        } catch (err) {
          row.status = row.status === '1' ? '0' : '1';
          ElMessage.error('状态更新失败');
        }
      },
      handleAddDictData() {
        this.state.dictDataDialogType = 'add';
        this.state.dictDataDialogTitle = '新增字典数据';
        this.state.dictDataForm = {
          id: '',
          dictType: this.state.selectedDictType.type,
          label: '',
          value: '',
          sort: 0,
          status: 1
        };
        this.state.dictDataDialogVisible = true;
      },
      handleEditDictData(row) {
        this.state.dictDataDialogType = 'edit';
        this.state.dictDataDialogTitle = '编辑字典数据';
        this.state.dictDataForm = { ...row };
        this.state.dictDataDialogVisible = true;
      },
      async submitDictDataForm() {
        if (!this.state.dictDataForm) return;
        try {
          await this.$refs.dictDataForm.validate();
          if (this.state.dictDataDialogType === 'add') {
            await this.postSystemDictData(this.state.dictDataForm);
          } else {
            await this.putSystemDictData(this.state.dictDataForm);
          }
          ElMessage.success(
            `${this.state.dictDataDialogType === 'add' ? '新增' : '编辑'}字典数据成功`
          );
          this.state.dictDataDialogVisible = false;
          this.getDictDataList();
        } catch (err) {
          if (err.name !== 'ValidationError') {
            ElMessage.error(
              `${this.state.dictDataDialogType === 'add' ? '新增' : '编辑'}字典数据失败`
            );
          }
        }
      },
      async handleDeleteDictData(id) {
        try {
          await ElMessageBox.confirm('确定删除该字典数据？', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
          await this.deleteSystemDictDataId(null, { params: { id } });
          ElMessage.success('删除字典数据成功');
          this.getDictDataList();
        } catch (err) {
          if (err !== 'cancel') ElMessage.error('删除字典数据失败');
        }
      }
    },
    async mounted() {
      await this.getDictTypeList();
      if (this.state.dictTypeList.length > 0) {
        this.handleAutoSelectFirstDictType();
      }
    }
  })
</script>
<style lang="css" scoped>
  .dict-manager-container {
    height: calc(100vh - 60px);
    box-sizing: border-box;
  }

  .main-content {
    display: flex;
    gap: 16px;
    height: 100%;
  }

  .left-panel {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .right-panel {
    flex: 2;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e8e8e8;
  }

  .panel-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
  }

  .panel-body {
    display: flex;
    flex-direction: column;
    padding: 16px;
    flex-grow: 1;
    overflow: hidden;
  }

  .search-input {
    margin-bottom: 16px;
  }

  .data-search {
    margin-bottom: 16px;
  }

  .content-table {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
  }

  .data-actions {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .no-data {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;
    font-size: 14px;
  }

  :deep(.el-table__body tr.current-row > td) {
    background-color: #ecf5ff !important;
  }

  :deep(.el-table th) {
    background-color: #fafafa;
    font-weight: 500;
    color: #333;
  }

  :deep(.el-button--link) {
    padding: 0;
  }

  @media (max-width: 1200px) {
    .main-content {
      flex-direction: column;
      height: auto;
      gap: 16px;
    }

    .left-panel,
    .right-panel {
      min-height: 400px;
    }
  }

  @media (max-width: 768px) {
    .main-content {
      flex-direction: column;
    }

    .left-panel,
    .right-panel {
      height: auto;
      min-height: 300px;
    }

    .panel-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .data-actions {
      width: 100%;
      flex-wrap: wrap;
    }

    .data-search {
      width: 100%;
    }
  }
</style>
